<template>
  <div class="transportationThree-warpper">
    <vue-high-chart :options="pieDataThree"></vue-high-chart>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import VueHighChart from "@/components/VueHighChart.vue";

// 图表基础配置
const baseConfig = {
  chart: {
    type: "pie",
    backgroundColor: "transparent",
    options3d: {
      enabled: true,
      alpha: 50,
      beta: 0,
    },
  },
  legend: {
    enabled: false,
    itemStyle: {
      color: "#ffffff",
      fontSize: 16,
    },
    itemHoverStyle: {
      color: "#52b8e5",
    },
  },
  title: { text: "" },
  tooltip: {
    pointFormat: "{point.y}条",
    style: {
      cursor: "default",
      fontSize: 20,
    },
  },
  credits: { enabled: false },
  colors: [
    "#CBAF4D",
    "#379DD9",
    "#60BA7B",
    "#FCDF68",
    "#3C8B91",
    "#D64515",
    "#544fc5",
    "#2ee0ca",
    "#91e8e1",
    "#07C092",
    "#FDB628",
  ],
  plotOptions: {
    pie: {
      allowPointSelect: false,
      cursor: "pointer",
      innerSize: 0,
      depth: 50,
      shadow: false,
      dataLabels: {
        useHTML: true,
        enabled: true,
        format: "<span>{point.name}<br/>{point.y}条</span>",
        style: { fontSize: 20 },
        color: "#ffffff",
        borderColor: "transparent",
        shadow: false,
        stroke: "transparent",
      },
      showInLegend: true,
    },
  },
  series: [
    {
      type: "pie",
      name: "机场",
      radius: ["100%", "100%"],
      center: ["55%", "50%"],
      data: [],
    },
  ],
};

// 图表数据
const pieDataThree = ref(baseConfig);

// 更新图表数据
const updateChart = (data) => {
  pieDataThree.value.series[0].data = data;
};

// 模拟接口调用
const fetchData = async () => {
  try {
    // 这里模拟异步请求
    const mockData = [
      {
        name: "黔江机场",
        y: 1,
        sliced: true,
        fullTitle: "黔江机场跑道条数",
      },
      {
        name: "江北机场",
        y: 4,
        sliced: true,
        fullTitle: "江北机场跑道条数",
      },
      {
        name: "万州机场",
        y: 1,
        sliced: true,
        fullTitle: "万州机场跑道条数",
      },
      {
        name: "仙女山机场",
        y: 1,
        sliced: true,
        fullTitle: "仙女山机场跑道条数",
      },
      {
        name: "巫山机场",
        y: 1,
        sliced: true,
        fullTitle: "巫山机场跑道条数",
      },
    ];

    // 模拟接口延迟
    await new Promise((resolve) => setTimeout(resolve, 100));
    updateChart(mockData);
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped>
.transportationThree-warpper {
  width: 100%;
  height: 100%;
}
</style>
